<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>【实例】canvas太阳系的动画</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        * {
            margin: 0px;
            padding: 0px;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .time-graph {
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
        }

    </style>
</head>

<body>
<div class="time-graph">
    <canvas id="myCanvas" width="300" height="300"></canvas>
</div>
<script type="text/javascript">
"use strict";function draw(){ctx.clearRect(0,0,300,300);var t=new Date;console.log(t.getSeconds()),ctx.save(),ctx.drawImage(sun,0,0),ctx.restore(),ctx.save(),ctx.translate(150,150),ctx.save(),ctx.beginPath(),ctx.strokeStyle="rgba(0,153,255,0.4)",ctx.arc(0,0,105,0,2*Math.PI),ctx.stroke(),ctx.closePath(),ctx.restore(),ctx.rotate(2*Math.PI/60*t.getSeconds()+2*Math.PI/6e4*t.getMilliseconds()),ctx.translate(105,0),ctx.drawImage(earth,-12,-12),ctx.save(),ctx.rotate(2*Math.PI/6*t.getSeconds()+2*Math.PI/6e3*t.getMilliseconds()),ctx.translate(0,28.5),ctx.drawImage(moon,-3.5,-3.5),ctx.restore(),ctx.restore(),requestAnimationFrame(draw)}var c=document.getElementById("myCanvas"),ctx=c.getContext("2d"),sunSrc="src/Canvas_sun.png",moonSrc="src/Canvas_moon.png",earthSrc="src/Canvas_earth.png",sun=new Image,moon=new Image,earth=new Image;sun.src=sunSrc,moon.src=moonSrc,earth.src=earthSrc,requestAnimationFrame(draw);

</script>
</body>

</html>